<template>
    <div>
        <h2 style="text-align: center;">用户信息显示</h2>
        <table class="table table-bordered">
            <tr>
                <td>登录名称:</td>
                <td>
                    {{UserInfo.UL_Name}}
                </td>
            </tr>

            <tr>
                <td>登录密码:</td>
                <td>
                    ******
                </td>
            </tr>

            <tr>
                <td>用户类型:</td>
                <td>
                    {{UserInfo.UT_Name}}
                </td>
            </tr>

            <tr>
                <td>真实姓名:</td>
                <td>
                    {{UserInfo.U_Name}}
                </td>
            </tr>

            <tr>
                <td>联系方式:</td>
                <td>
                    {{UserInfo.U_Phone}}
                </td>
            </tr>

            <tr>
                <td>身份证号:</td>
                <td>
                    {{UserInfo.U_IdCard}}
                </td>
            </tr>

            <tr>
                <td>出生日期:</td>
                <td>
                    {{UserInfo.U_Date.substring(0,10)}}
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    {{(UserInfo.U_Sex?"男":"女")}}
                </td>
            </tr>

            <tr>
                <td>年收入:</td>
                <td>
                    {{UserInfo.U_InCome}}
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import axios from 'axios';
import {useUserStore} from '../../store/index.ts'

//创建仓库实例
const userStore=useUserStore();

//创建响应式数据，完成控件的双向绑定操作
const UserInfo=ref({
    U_Id:0,
    UL_Name:"",
    UL_Pwd:"******",
    U_Name:"",
    U_Sex:true,
    U_Phone:"",
    U_Date:"",
    U_IdCard:"",
    U_InCome:"",
    UT_Name:"",
    UT_Id:0
})

//创建生命周期函数钩
onMounted(()=>{
    LoadData();
})

//完成用户类型信息加载
const LoadData=()=>{
    axios.get("https://localhost:44321/api/Users/GetAllUserInfo",
        {
            params:{
                Uid:userStore.Uid
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        UserInfo.value=res.data[0]
    })
}
</script>
